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来 源 : jQuery Mobile 教程 


整理 : 飞龙 


jQuery Mobile 简介 


jQuery Mobile 是 一 个 用 于 创建 移动 端 web 应 用 的 的 前 端 框架 。 


学 习 本 教程 前 你 需要 先 了 解 


在 开始 学 习 jQuery Mobile 前 , 你 应 该 了 解 一 下 基础 知识 : 


e HTML 
e CSS 
e jQuery 


如 果 你 想 学 习 这 些 知 识 ， 你 可 以 访问 本 站 的 首页 。 


什么 是 jQuery Mobile? 


jQuery Mobile 是 针对 触 屏 智 能 手机 与 平板 电脑 的 网 页 开发 框架 。 
jQuery Mobile 工作 与 所 有 主流 的 智能 手机 和 平板 电脑 上 : 
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jQuery Mobile 构建 于 jQuery 以 及 jQuery Ul 类 库 之 上 ， 如 果 您 了 解 jQuery， 您 可 以 很 容易 的 
学 习 jQuery Mobile。 





jQuery Mobile 使 用 了 极 少 的 HTML5、CSS3、JavaScript 和 AJAX 脚本 代码 来 完成 页 面 的 布 
局 泻 染 。 


为 什么 使 用 jQuery Mobile? 


通过 使 用 jQuery Mobile 可 以 " 写 更 少 的 代码 ， 做 更 多 的 事情 " : 它 可 以 通过 一 个 灵活 及 简单 的 
方式 来 布局 网 页 ， 且 兼容 所 有 移动 设备 。 














9 不 同 设备 使 用 了 不 同 开发 语言 ，jQuery Mobile 可 以 很 好 的 兼容 不 容 的 设备 或 操作 系 
统 : 


e Android 和 Blackberry (黑莓 ) 使 用 JAVA 语言 。 


e iOS 使 用 Objective C 语言 
e Windows Phone 使 用 C# 和 .net, 等 。 


jQuery Mobile 解决 了 不 同 设备 兼容 的 问题 ， 因 为 它 只 使 用 HTML，CSS 和 
JavaScript， 这 是 所 有 移动 网 络 浏览 器 的 标准 ! 


最 好 的 阅读 体验 


尽管 jQuery Mobile 兼 容 所 有 的 移动 设备 ， 但 是 并 不 能 完全 兼容 PC 机 (由 于 有 限 的 CSS3 支 
持 ) 。 


为 了 更 好 的 阅读 本 教程 ， 建 议 您 使 用 Google Chrome 浏览 器 。 


jQuery Mobile 安装 


在 你 的 网 页 中 添加 jQuery Mobile 


你 可 以 通过 以 下 几 种 方式 将 jQuery Mobile 添 加 到 你 的 网 页 中 : 


e 从 CDN 中 加 载 jQuery Mobile (推荐 ) 
e 从 jQuerymobile.com 下 载 jQuery Mobile = 


从 CDN 中 加 载 jQuery Mobile 





Y CDN 的 全 称 是 Content Delivery Network， 即 内 容 分 发 网 络 。 其 基本 思路 是 尽 可 能 避 
开 互 联网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传 输 的 更 快 、 更 稳 
定 。. 





使 用 jQuery Atk, 你 不 需要 在 电脑 上 安装 任何 东西 ; 你 仅仅 需要 在 你 的 网 页 中 加 载 以 下 层 王 样 
xt (.css) 和 JavaScript È (.js) 就 能 够 使 用 jQuery Mobile: 


jQuery Mobile CDN: 


<head> 

<link rel="stylesheet" href="http://code. jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min. 
<script src="http://code. jquery.com/jquery-1.8.3.min.js"></script> 

<script src="http://code. jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
</head> 





EPE 


下 载 jQuery Mobile 
如 果 你 想 将 jQuery Mobile 放 于 你 的 主机 中 ,你 可 以 从 jQuerymobile.com 下 载 该 文件 。 


<head> 

<link rel=stylesheet href=jquery.mobile-1.3.2.css> 
<script src=jquery.js></script> 

<script src=jquery.mobile-1.3.2.js></script> 
</head> 


提示 : 将 下 载 的 文件 放置 于 与 网 页 同一 目录 下 。 


W3School jQuery Mobile 教程 


? 你 是 否 想 知道 为 什么 在 <script> 标签 中 没有 插入 type="text/javascript" ? 


在 HTML5 已 经 不 需要 该 属性 。 JavaScript 在 所 有 现代 浏览 器 中 是 HTML5 的 默认 脚本 


语言 ! 


mag 


jQuery Mobile 安装 


jQuery Mobile 7H 
开始 学 习 jQuery Mobile 


@ 尽管 jQuery Mobile 兼 容 所 有 的 移动 设备 ， 但 是 并 不 全 兼容 PC 机 (由 于 有 限 的 
CSS3 支 持 ) 。 





为 了 更 好 的 阅读 本 教程 ， 建 议 您 使 用 Google Chrome 浏览 器 。 


实例 


<body> 
<div data-role="page"> 


<div data-role="header"> 
<h1> 欢 迎 来 到 我 的 主页 </h1> 
</div> 
<div data-role="content"> 
<p> 我 现在 是 一 个 移动 端 开发 者 ! 1</p> 
</div> 
<div data-role="footer"> 
<h1> 底 部 文本 </h1> 
</div> 


</div> 
</body> 


实例 解析 : 


e data-role="page" 是 在 浏览 器 中 显示 的 页 面 。 

e data-role="header" 是 在 页 面 顶部 创建 的 工具 条 (通常 用 于 标题 或 者 搜索 按钮 ) 
e data-role="content" 定义 了 页 面 的 内 容 ， 上 比如 文本 ， 图 片 ， 表 单 ， 按 钮 等 。 

e data-role="footer" 用 于 创建 页 面 底部 工具 条 。 

。 在 这 些 容器 中 你 可 以 添加 任何 HTML 元 素 - 段落 , BH, 标题 , 列表 等 。 





9 jQuery Mobile 依赖 HTML5 data-* 属性 来 支持 各 种 Ul 元 素 、 过 渡 和 页 面 结构 。 不 
支持 它们 的 浏览 器 将 以 静默 方式 弃 用 它们 。 





在 页 面 中 添加 jQuery Mobile 


使 用 jQuery Mobile, 你 可 以 再 单个 HTML 文件 中 创建 多 个 不 同 的 页 面 。 
你 可 以 使 用 不 同 的 href 属 性 来 区 分 使 用 同一 个 唯一 id 的 页 面 


44 


实例 


<div data-role="page" id="pageone"> 
<div data-role="content"> 
<a href="#pagetwo">Go to Page Two</a> 
</div> 
</div> 


<div data-role="page" id="pagetwo"> 
<div data-role="content"> 
<a href="#pageone">Go to Page One</a> 
</div> 
</div> 


注意 : 当 web 应 用 有 大 量 的 内 容 (XA, BA, MAS) 将 会 严重 影响 加 载 时 间 。 如 果 你 不 
想 使 用 内 页 链接 可 以 使 用 外 部 文件 : 


<a href="externalfile.html"> 访 问 外 部 文件 </a> 


页 面 作 为 对 话 框 使 用 


对 话 框 是 用 于 显示 页 面 信息 显示 或 者 表单 信息 的 输入 。 


在 链接 中 添加 data-rel="dialog" 让 用 户 点 击 链 接 时 弹出 对 话 框 : 
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实例 


<div data-role="page" id="pageone"> 
<div data-role="content"> 
<a href="#pagetwo" data-rel="dialog">Go to Page Two</a> 
</div> 
</div> 


<div data-role="page" id="pagetwo"> 
<div data-role="content"> 
<a href="#pageone">Go to Page One</a> 
</div> 
</div> 


jQuery Mobile 页 面 切换 


jQuery Mobile 包含 CSS3 效果 让 您 选择 页 面 打 开 的 方式 。 


jQuery Mobile 页 面 切 换 效 果 


jQuery Mobile 提供 了 各 种 页 面 切换 到 下 一 个 页 面 的 效果 。 
注意 : 为 了 实现 页 面 切换 效果 ， 浏 览 器 必须 支持 CSS3 3D 切换 : 


e Internet Explorer 10 支持 3D 切换 (早期 版 本 不 支持 ) 
e Opera 不 支持 3D 切换 


页 面 切 换 效 果 可 被 应 用 于 任何 使 用 data-transition 属性 的 链接 或 表单 提交 : 


<a href="#anylink" data-transition="slide"> 切 换 到 第 二 个 页 面 </a> 


下 面 的 表格 显示 了 通过 使 用 data-transition 属性 后 可 用 的 页 面 切换 : 


页 面 切 换 描述 党 试 一 下 
fade 默认 。 淡 入 到 下 一 页 

flip 从 后 向 前 翻转 到 下 一 页 

flow 抛 出 当前 页 ， 进 入 下 一 页 
pop 像 弹 出 窗口 一 样 进入 下 一 页 
slide 从 右 到 左 滑 动 到 下 一 页 
slidefade 从 右 到 左 滑动 并 淡 入 到 下 一 页 
slideup 从 下 到 上 滑动 到 下 一 页 
slidedown 从 上 到 下 滑动 到 下 一 页 

turn 翻 到 下 一 页 

none 没有 切换 效果 


@ 在 jQuery Mobile 的 所 有 链接 上 ， 上 默认 使 用 淡 入 淡出 的 效果 (如 果 浏 览 器 支持 ) o 





提示 : 上 面 的 所 有 效果 支持 后 退行 为 。 例 如 ， 如 果 您 想 要 页 面 从 左 向 右 滑动 ， 而 不 是 从 右 向 
左 滑动 ， 请 使 用 带 有 "reverse" 值 的 data-direction 属性 。 在 后 退 按钮 上 这 是 默认 的 。 


例 


将 


<a href="#pagetwo" data-transition="slide" data-direction="reverse">t]i#</a> 


m n ro 
jQuery Mobile 按钮 
Mobile 应 用 程序 是 建立 在 您 想 要 显示 的 简单 的 点 击 事物 上 。 


按钮 


信息 


底部 文本 


在 jQuery Mobile 中 创建 按钮 


在 jQuery Mobile 中 ， 按 钮 可 通过 三 种 方式 创建 : 


e 使 用 <button> 元 素 
。 使 用 <input> 元 素 
e 使 用 带 有 data-role="button" 的 <a> 元 素 


<button> 


<button> 按 钮 </button> 


<input> 


<input type="button" value=" 按 钮 "> 


<a> 


<a href="#" data-role="button'"> 按 钮 </a> 


9 在 jQuery Mobile 中 ， 按 钮 会 自动 样式 化 ， 让 它们 在 移动 设备 上 更 具 吸 引力 和 可 用 
性 。 我 们 推荐 您 使 用 带 有 data-role="button" 的 <a> 元 素 在 页 面 间 进 行 链接 ， 使 用 
<input> 或 <button> 元 素 进 行 表 单 提交 。 


导航 按钮 


如 需 通过 按钮 在 页 面 间 进 行 链接 ， 请 使 用 带 有 data-role="button" 属性 的 <a> 元 素 : 


实例 


<a href="#pagetwo" data-role="button"> 访 问 第 二 个 页 面 </a> 


内 联 按 钮 
默认 情况 下 ， 按 钮 占 满 整 个 屏幕 宽度 。 如 果 你 想 要 一 个 仅 是 与 内 容 一 样 宽 的 按钮 ， 或 者 如 果 


您 想 要 并 排 显示 两 个 或 多 个 按钮 ， 请 添加 data-inline="true" : 


实例 


<a href="#pagetwo" data-role="button" data-inline="true"> 访 问 第 二 个 页 面 </a> 


组 合 按 知 
jQuery Mobile 提供 了 一 个 简单 的 方法 来 将 按钮 组 合 在 一 起 。 


请 把 data-role="controlgroup" 属性 和 data-type="horizontallvertical" 一 起 使 用 来 规定 是 否 水 
平 或 垂直 组 合 按钮 : 


实例 


<div data-role="controlgroup" data-type="horizontal"> 
<a href="#anylink" data-role="button">}%44 1</a> 

<a href="#anylink" data-role="button">}%4 2</a> 

<a href="#anylink" data-role="button">}%44 3</a> 
</div> 


9 默认 情况 下 ， 组 合 按钮 是 垂直 组 合 ， 它 们 之 间 没 有 外 边 距 和 空间 。 并 且 只 有 第 一 个 
和 最 后 一 个 按钮 是 圆 角 ， 以 便 它 们 双 eal 起 的 时 候 创 建 一 个 漂亮 的 外 观 。 


后 退 按钮 


如 需 创 建 后 退 按钮 ， 请 使 用 data-rel="back" 属性 (这 会 忽略 错 的 href 值 ) 


实例 


<a href="#" data-role="button" data-relL="back"> 返 回 </a> 


多 用 于 按钮 的 data-* 属性 


属性 值 苗 述 实例 
data-corners true | false 规定 按钮 是 否 圆 角 
data-mini true | false 规定 按钮 是 否 更 小 
data-shadow true | false 规定 按钮 是 否 有 阴影 


如 需 查 看 所 有 jQuery Mobile data-* 属性 的 完整 参考 手册 ， 请 访问 我 们 的 jQuery Mobile Data 
属性 参考 手册 。 


下 一 章 演示 如 何 附加 图 标 到 您 的 按钮 上 。 


. . mh = 
jQuery Mobile 按钮 图 标 
jQuery Mobile 提供 了 一 套 让 按钮 看 起 来 更 称心 如 意 的 图 标 。 


按钮 图 标 


主页 主页 搜索 
搜索 


底部 文本 


添加 图 标 到 jQuery Mobile 按钮 
如 需 添加 图 标 到 您 的 按钮 ， 请 使 用 data-icon 属性 : 


<a href="#anylink" data-role="button" data-icon="search">Search</a> 


提示 : 您 也 可 以 在 <button> 或 <input> 元 素 上 使 用 data-icon 属性 。 


下 面 我 们 列 出 一 些 jQuery Mobile 提供 的 可 用 图 标 : 


属性 值 描述 标 实例 
data-icon="arrow-|" 左 箭头 

data-icon="arrow-r" 右 箭头 

data-icon="delete" 删除 

data-icon="info" 信息 

data-icon="home" 首页 

data-icon="back" 后 退 

data-icon="search" 搜索 


data-icon="grid" 网 格 


如 需 查 看 所 有 jQuery Mobile 按钮 图 标的 完整 参考 手册 ， 请 访问 我 们 的 jQuery Mobile 图 标 参 
考 手 册 。 


eh /L = 

定位 图 标 

您 也 可 以 规定 图 标定 位 在 按钮 的 什么 部 位 : 顶部 (top) 、 右 侧 (right) 、 底 部 (bottom) 、 
(left) 。 


请 使 用 data-iconpos 属性 来 指定 位 置 : 


图 标的 位 置 


<a href="#link" data-role="button" data-icon="Search" data-iconpos="top"> 顶 部 </a> 
<a href="#link" data-role="button" data-icon="search" data-iconpos="right"> 右 侧 </a> 
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom"> 底 部 </a> 
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">A {</a> 





9 默认 情况 下 ， 所 有 的 按钮 图 标 被 放置 到 左 侧 。 


只 显示 图 标 


如 果 只 想 显示 图 标 ， 请 设置 data-iconpos 为 "notext" : 


<a href="#link" data-role="button" data-icon="search" data-iconpos="notext"> 搜 索 </a> 


jQuery Mobile 工具 栏 


jQuery Mobile 工具 栏 


工具 栏 元 素 通常 位 于 头 部 和 尾部 内 - 让 导航 易于 访问 : 


这 是 一 个 简单 的 弹 窗 | 
阅读 教程 了 解 如 何 使 用 弹 窗 | 


头 部 栏 


头 部 栏 一 般 包含 页 面 标题 /logo 或 一 两 个 按钮 (通常 是 首页 、 选 项 或 搜索 ) 。 
您 可 以 添加 按钮 到 头 部 的 左 侧 或 右 侧 。 


下 面 的 代码 ， 将 添加 一 个 按钮 到 头 部 标题 文本 的 左 侧 ， 添 加 一 个 按钮 到 头 部 标题 文本 的 右 
Any: 


实例 


<div data-role="header"> 

<a href="#" data-role="button">& </a> 
<h1> 欢 迎 来 到 我 的 主页 </h1> 

<a href="#" data-role="button"> 搜 索 </a> 
</div> 


下 面 的 代码 ， 将 添加 一 个 按钮 到 头 部 标题 文本 的 左 侧 : 


<div data-role="header"> 

<a href="#" data-role="button"> 首 页 </a> 
<h1> 欢 迎 来 到 我 的 主页 </h1> 

</div> 


但 是 ， 如 果 您 把 按钮 链接 放置 在 <h1> 元 素 之 后 ， 将 无 法 显示 右 侧 的 文本 。 要 添加 一 个 按钮 到 
头 部 标题 的 右 侧 ， 请 指定 class 为 "ui-btn-right" : 


实例 


<div data-role="header"> 

<h1> 欢 迎 来 到 我 的 主页 </h1> 

<a href="#" data-role="button" class="ui-btn-right"> 搜 索 </a> 
</div> 


@ 头 部 可 以 包含 一 个 或 两 个 按钮 ， 而 尾部 没有 限制 。 


尾部 栏 


尾部 栏 比 头 部 栏 更 灵活 - 在 整个 页 面 中 它们 更 具 功 能 性 和 可 变性 ， 因 此 可 以 包含 尽 可 能 多 的 
钮 : 


洲 


实例 


<div data-role="footer"> 

<a href="#" data-role="button"> 在 Facebook 上 关注 我 </a> 
<a href="#" data-role="button"> 在 Twitter 上 关注 我 </a> 
<a href="#" data-role="button"> 在 Instagram 上 关注 我 </a> 
</div> 


注意 : 尾部 的 样式 与 头 部 不 同 (没有 内 边 距 和 空间 ， 且 按钮 不 居中 ) 。 为 了 解决 这 个 问题 ， 
请 把 "ui-btn" 放置 在 尾部 的 class 上 : 


实例 


<div data-role="footer" class="ui-btn"> 


您 还 可 以 将 尾部 中 的 按钮 进行 水 平 或 垂直 组 合 : 


实例 


<div data-role="footer" class="ui-btn"> 

<div data-role="controlgroup" data-type="horizontal"> 

<a href="#" data-role="button" data-icon="plus"> 在 Facebook 上 关注 我 </a> 
<a href="#" data-role="button" data-icon="plus"> 在 Twitter 上 关注 我 </a> 
<a href="#" data-role="button" data-icon="plus"> 在 Instagram 上 关注 我 </a> 
</div> 

</div> 


定位 头 部 栏 和 尾部 栏 


头 部 和 尾部 可 以 通过 三 种 方式 进行 定位 : 


e inline- 软 认 。 头 部 栏 和 尾部 栏 与 页 面 内 容 内 联 。 

e Fixed - 头 部 栏 和 尾部 栏 固定 在 页 面 的 顶部 和 底部 。 

e Fullscreen - 与 Fixed 定位 模式 基本 相同 ， 头 部 栏 和 尾部 栏 固定 在 页 面 的 项 部 和 底部 。 但 
是 当 他 工具 栏 滚动 出 屏幕 之 外 时 ， 不 会 自动 重新 显示 ， 除 非 点 击 屏幕 ， 这 对 于 图 片 或 视 
频 类 有 提升 代入 感 的 应 用 是 非常 有 用 的 。 注 意 这 种 模式 下 工具 栏 会 遮 住 页 面 内 容 ， 所 以 
最 好 用 在 比较 特殊 的 场合 下 。 


使 用 data-position 属性 来 定位 头 部 栏 和 尾部 栏 : 


Inline 定位 (默认) 


<div data-role="header" data-position="inline"></div> 
<div data-role="footer" data-position="inline"></div> 


Fixed 定位 


<div data-role="header" data-position="fixed"></div> 
<div data-role="footer" data-position="fixed"></div> 


要 启用 全 屏 定位 ， 请 使 用 data-position="fixed"， 并 添加 data-fullscreen 属性 到 元 素 : 


Fullscreen 定位 


<div data-role="header" data-position="fixed" data-fullscreen="true"></div> 
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div> 


提示 : 全 屏 定 位 适用 于 照片 、 图 像 和 视频 。 


提示 : 固定 定位 和 全 屏 定 位 中 ， 通 过 点 击 屏 幕 特 隐藏 和 显示 头 部 栏 和 尾部 栏 。 


jQuery Mobile 导航 栏 


jQuery Mobile 导航 栏 


导航 栏 是 由 一 组 水 平 排列 的 链接 组 成 ， 通 常 包 含 在 头 部 或 尾部 内 。 
默认 情况 下 ， 导 航 栏 中 的 链接 将 自动 变 成 按钮 〈 不 需要 data-role="button") 。 


使 用 data-role="navbar" 属性 来 定义 导航 栏 : 


实例 


<div data-role="header"> 

<div data-role="navbar"> 

<ul> 

<li><a href="#anylink"> W</a></li> 
<li><a href="#anylink"> M—</a></li> 
<li><a href="#anylink"> 搜 索 </a></1i> 
</ul> 

</div> 

</div> 





Y 默认 情况 下 ， 按 钮 的 宽度 与 它 的 内 容 一 样 。 使 用 一 个 无 序列 表 来 平均 地 划分 按钮 的 
宽度 : 1 个 按钮 占 100% 宽度 ，2 个 按钮 则 各 占 50% 的 宽度 ，3 个 按钮 则 每 个 占 33,3% 
的 宽度 ， 依 此 类 推 。 然 而 ， 如 果 您 在 导航 栏 中 指定 了 超过 5 个 按钮 ， 将 会 拆 成 多 行 (4 
看 "更 多 实例 ") 。 





激活 按钮 
当 导 航 栏 中 的 某 个 链接 被 点 击 ， 它 将 获得 被 选中 GRF) 的 外 观 。 


如 果 想 在 不 点 击 链接 时 获得 这 种 外 观 ， 请 使 用 class="ui-btn-active" : 


实例 


<li><a href="#anylink" class="ui-btn-active"> 首 页 </a></1i> 


对 于 多 个 页 面 ， 您 可 能 想 要 每 个 按钮 的 选中 外 观 代表 当前 用 户 所 在 的 页 面 。 要 做 到 这 一 点 ， 
请 添加 "ui-state-persist" 和 "ui-btn-active" 到 链接 的 class : 


实例 


<li><a href="#anylink" class="ui-btn-active ui-state-persist"> 首 页 </a></1i> 


更 多 实例 

内 容 中 的 导航 栏 如 何在 data-role="content" 内 添加 导航 栏 。 
尾部 中 的 导航 栏 如 何在 尾部 内 添加 导航 栏 。 
导航 栏 中 的 定位 图 标 如 何在 尾部 内 的 导航 栏 中 定位 图 标 。 


超过 5 个 按钮 导航 栏 中 10 个 按钮 的 演示 。 


jQuery Mobile =i #32 


可 折 受 内 容 块 


可 折合 块 人 允许 您 隐藏 或 显示 内 容 - 对 于 存储 部 分 信息 很 有 用 。 


如 需 创 建 一 个 可 折 生 的 内 容 块 ， 需 要 为 容器 添加 data-role="collapsible" 属性 。 在 容器 (div) 
内 ， 添 加 一 个 标题 元 素 (H1-H6) ， 后 跟 您 想 要 进行 扩展 的 HTML 标记 : 


实例 


<div data-role="collapsible"> 
<h1> 点 击 我 - HALT E !</h1> 
<P RETHA. </p> 
</div> 


AAEN F, ABERIAK. MRERDMANRAAR, AH data- 
collapsed="false" : 


实例 


<div data-role="collapsible" data-collapsed="false"> 
<h1> 点 击 我 - RIAH A !</h1> 

<p>I'm 现在 我 默认 是 展开 的 。</p> 

</div> 


BRE Al HT & tk 


DTeHARredRIRE : 


实例 


<div data-role="collapsible"> 
<h1> 点 击 我 - HALT E !</h1> 

<p> 我 是 被 展开 的 内 容 。</p> 

<div data-role="collapsible"> 
<h1> 点 击 我 - ERENT ES | </h1> 
<p> 我 是 柑 套 的 可 折 辣 块 中 被 展开 的 内 容 。</p> 
</div> 

</div> 


® Ae HABA RR HTS ARRE. 


可 折 得 集合 


可 折 受 集合 是 将 可 折 和 党 块 组 合 在 一 起 (就 像 手 风琴 一 样 ) 。 当 一 个 新 的 块 被 展开 时 ， 所 有 其 
他 的 块 都 会 被 折 生 起 来 。 


创建 若干 个 可 折 和 县 的 内 容 块 ， 然 后 把 可 折 壹 内容 块 用 带 有 data-role="collapsible-set" 的 新 容 
器 包围 起 来 : 


实例 


<div data-role="collapsible-set"> 
<div data-role="collapsible"> 
<h1> 点 击 我 - BALA ! </h1> 

<p> 我 是 被 展开 的 内 容 。</p> 

</div> 

<div data-role="collapsible"> 
<h1> 点 击 我 - RIH È !</h1> 

<p> 我 是 被 展开 的 内 容 。</p> 

</div> 

</div> 


更 多 实例 
data-inset 属性 取消 圆 角 AARHUS LA A. 


通过 
通过 data-mini 属性 迷你 化 可 折 营 块 MLA ARB, 
通过 


data-collapsed-icon 和 data-expanded-icon 改变 图 标 如 何 改 变 可 折 受 块 的 图 标 (默认 是 
+ 和 -) 。 


jQuery Mobile 网 格 


jQuery Mobile 布局 网 格 
jQuery Mobile 提供 了 一 套 基于 CSS 的 分 列 布局 。 然 而 ， 在 移动 设备 上 ， 由 于 考虑 手机 的 屏 
幕 宽度 狭 罕 ， 一 般 不 建议 使 用 分 栏 分 列 布局 。 


但 有 时 您 想 要 将 较 小 的 元 素 〈 如 按钮 或 导航 标签 ) 并 排 地 排列 在 一 起 ， 就 像 是 在 一 个 表格 中 
一 样 。 这 种 情况 下 ， 推 荐 使 用 分 列 布局 。 


网 格 中 的 列 是 等 帘 的 〈 合 计 是 100%) , RALE, AR. margin 或 padding. 


这 里 有 四 种 布局 网 格 可 供 使 用 : 


网 格 类 J 列 宽 对 应 实例 
ui-grid-a 2 50% / 50% ui-block-a|b 
ui-grid-b 3 33% | 33% | 33% ui-block-a|b|c 
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d 
ui-grid-d 5 20% / 20% /20% / 20% / 20% ui-block-a|b|c|dle 


9 在 列 容器 内 ， 子 元 素 拥有 的 class 为 ui-block-alblcldle 取决 于 列 数 。 列 会 浮动 并 
排 。 


实例 1:class 为 ui-grid-a (两 列 布局 ) ， 您 必须 指定 ui-block-a 和 ui-block-b 的 两 个 子 元 


实例 2:class 为 ui-grid-b (三 列 布局 ) ， 则 必须 添加 ui-block-a, ui-block-b 和 ui-block-c 
的 三 个 子 元 素 。 


自 定 义 网 格 
通过 使 用 CSS， 您 可 以 自 定义 列 块 : 


实例 


<style> 

.ui-block-a, 

.ui-block-b, 

.Ui-block-c 
background-color: lightgray; 
border: 1px solid black; 
height: 100px; 

font-weight: bold; 
text-align: center; 

padding: 30px; 


</style> 


Rte BY LAG it A ER ELH : 


<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div> 
多 行 


在 列 中 也 可 以 有 多 个 行 。 


注意 : ui-block-a-class 总 是 创建 一 个 新 行 : 


44 


实例 


<div class="ui-grid-b"> 

<div class="ui-block-a"><span>Some Text</span></div> 
<div class="ui-block-b"><span>Some Text</span></div> 
<div class="ui-block-c"><span>Some Text</span></div> 
<div class="ui-block-a"><span>Some Text</span></div> 
<div class="ui-block-b"><span>Some Text</span></div> 
<div class="ui-block-a"><span>Some Text</span></div> 
</div> 


jQuery Mobile 列表 视图 


Calvin 


jQuery Mobile 列表 视图 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 ; 有 序 (<ol>) 和 无 序 (<ul>). 


列表 视图 是 jQuery Mobile 中 功能 强大 的 一 个 特性 。 它 会 使 标准 的 无 序 或 有 序列 表 应 用 更 广 
泛 。 应 用 方法 就 是 在 ul 或 ol 标签 中 添加 data-role="listview" 属 性 。 在 每 个 项 目 (<li>) 中 添加 链 
接 ， 用 户 可 以 点 击 它 : 


实例 


<ol data-role="listview"> 

<li><a href="#"> 列 表 项 m</a></1i> 
</ol> 
<ul data-role="listview"> 


<li><a href="#"> 列 表 项 </a></1i> 
</ul> 


列表 样式 的 圆 角 和 边缘 ， 使 用 data-inset="true" 属性 设置 : 


实例 


<ul data-role="listview" data-inset="true"> 





y 默认 情况 下 ， 列 表 项 的 链接 会 自动 变 成 一 个 按钮 (不 需要 data-role="button"). | 


列表 分 隅 
列表 项 也 可 以 转化 为 列表 分 割 项 ， 用 来 组 织 列表 ， 使 列表 项 成 组 。 


指定 列表 分 割 ， 给 列表 项 <li> 元 素 添加 data-role="list-divider" 属性 即 可 : 


实例 


<ul data-role="listview"> 

<li data-role="list-divider">RRiN</1li> 
<li><a href="#"> 法 国 </a></1i> 
<li><a href="#"> 德 国 </a></1i> 

</ul> 





如 果 你 有 一 个 字母 顺序 排列 的 列表 ， (例如 一 个 电话 筹 ) 通过 <ol> 或 者 <ul> 元 素 的 data- 
autodividers="true" 属性 设置 可 以 配置 为 自动 生成 的 项 目的 分 隔 : 


实例 


<ul data-role="listview" data-autodividers="true"> 
<li><a href="#">Adele</a></1li> 
<li><a href="#">Agnes</a></1li> 
<li><a href="#">Billy</a></1li> 
<li><a href="#">Calvin</a></1i> 


</ul> 





9 data-autodividers="true" 可 以 配置 为 自动 生成 的 项 目的 分 隔 。 默 认 情况 下 ， 创 建 的 
分 隔 文本 是 列表 项 文本 的 第 一 个 大 写字 母 。 


搜索 过 滤 


jquery Mobile 提 供 一 个 非常 简单 的 方法 ， 实 现 客户 端 搜 索 功 能 ， 筛 选 列表 的 选项 。 只 需 添 加 
data-filter="true" 属性 即 可 : 


实例 


<ul data-role="listview" data-filter="true"></ul> 


默认 情况 下 ， 搜 索 输 入 框 默认 的 字符 为 "Filter items..." 


通过 设置 mobileinit 事 件 的 绑 定 程序 或 者 给 
$.mobile.listview.prototype.options.filterPlaceholder 选项 设置 一 个 字符 串 ， 或 者 给 列表 设置 
data-filter-placeholder 属性 ， 可 以 设置 搜索 输入 框 的 默认 字符 : 


实例 


<ul data-role="listview" data-filter="true" data-filter-placeholder=" 搜 索 姓 名 "> 


更 多 实例 


只 读 列 表 如 何 创 建 一 个 不 带 链接 的 列表 (不 会 是 个 按钮 且 不 可 点 击 )。 


jQuery Mobile 列表 内 容 


Google Chrome 
Google Chrome 是 免费 的 开源 web 浏览 器 。 发 布 于 2008 年 。 


Mozilla Firefox 


Firefox BIE Mozilla 的 web $A o BAF 2004 年 。 





jQuery Mobile 列表 缩 略 图 


大 于 16x16px 的 图 像 ， 请 在 链接 中 添加 <img> 元 素 。 


jQuery Mobile 将 自动 缩放 图 像 到 80x80px: 


实例 


<ul data-role="listview"> 
<li><a href="#"><img src="chrome.png"></a></1i> 
</ul> 


使 用 标准 的 HTML 添 加 列表 信息 : 


实例 


<ul data-role="listview"> 
<li> 
<a href="#"> 
<img src="chrome.png"> 
<h2>Google Chrome</h2> 
<p>Google Chrome 免费 的 开源 web 浏览 器 。 发 布 于 2008 Ẹ, </p> 
</a> 
</li> 
</ul> 


jQuery Mobile 列表 图 标 


在 列表 <img> 元 素 使 用 class="ui-li-icon" 添加 16x16px 图 标 : 


实例 


<li><a href="#"><img src="us.png" alt="USA" class="ui-1i-icon">USA</a></1i> 


分 割 按钮 


在 JQuery Mobile 的 列表 中 ， 有 时 需要 对 选项 内 容 做 两 个 不 同 的 操作 ， 这 时 ， 需 要 对 选项 中 的 
链接 按钮 进行 分 割 。 实 现 分 割 的 方法 是 在 <li> 元 素 中 再 增加 一 个 <a> 元 素 ， 便 可 以 在 页 面 实现 
分 割 效果 。 

jQuery Mobile 会 自动 设置 第 二 个 链接 为 蓝 色 箭头 的 图 标 ， 图 标的 链接 文字 (如 果 有 的 话 ) 将 
EA Pt AE 图 标 时 显示 : 


实例 


<ul data-role="listview"> 
<li> 
<a href="#"><img src="chrome.png"></a> 
<a href="#">Some Text</a> 
</li> 
</ul> 


添加 一 些 页 面 和 对 话 框 使 链接 功能 更 加 丰富 : 


实例 


<ul data-role="listview"> 
<li> 
<a href="#"><img src="chrome.png"></a> 
<a href="#download" data-rel="dialog"> 下 载 浏 览 器 </a> 


</li> 
</ul> 


气泡 数字 
气泡 数字 是 用 来 显示 列表 项 相关 的 数字 ， 如 在 一 个 邮箱 的 邮件 : 


如 需 添 加 气泡 数字 ， 请 使 用 行内 元 素 ， 比 如 <span>， 设 置 class "ui-li-count" 属性 并 添加 数 


ch 


tf: 


实例 


<ul data-role="listview"> 
<li><a href="#"> 收 件 箱 <span class="ui-li-count">25</span></a></li> 
<li><a href="#"> 发 件 箱 <span class="ui-li-count">432</span></a></li> 
<li><a href="#"> 垃 圾 箱 <span class="ui-li-count">7</span></a></1li> 
</ul> 


注意 : 显示 一 个 正确 的 气泡 数字 ， 必 须 修改 编程 方式 。 这 将 在 以 后 的 章节 解释 。 


更 多 实例 

改变 列表 项 的 默认 链接 图 标 如 何 设置 列表 项 的 默认 链接 图 标 (默认 是 右 箭头 ). 
可 折 党 的 列表 如 何 创建 显示 /隐藏 的 列表 。 

更 多 内 容 格式 如 何 制作 一 个 日 万 。 


jQuery Mobile 表单 


jQuery Mobile 会 自动 为 HTML 表单 自动 添加 样式 ， 让 它们 看 起 来 更 具 吸 引力 ， 触 摸 起 来 更 具 
友好 性 。 


jQuery Mobile 表单 


切换 开关 : Off 
选择 喜欢 的 电影 : 
Mak fk 


变形 金刚 


碟 中 谍 


jQuery Mobile 表单 结构 
jQuery Mobile 使 用 CSS 为 HTML 表单 元 素 添 加 样式 ， 让 它们 更 具 吸 引力 ， 更 易于 使 用 。 


在 jQuery Mobile 中 ， 您 可 以 使 用 下 列表 单 控件 : 


。 文本 输入 框 
。 搜索 输入 框 
。 单 选 按钮 
。 复 选 框 

。 选择 菜单 
。 滑动 条 


。 翻转 拔 动 开关 


当 使 用 jQuery Mobile 表单 时 ， 您 应 当知 道 : 


。 <form> 元 素 必 须 有 一 个 method 和 一 个 action 属性 

° O a adi "id" 属性 。id 必须 是 整个 站 点 所 有 页 面 上 唯一 的 。 这 是 
因为 jQuery Mobile 的 单 页 导航 机 制 使 得 多 个 不 同 页 面 在 同一 时 间 被 呈现 

。 每 个 表单 元 素 必须 有 一 个 标签 。 设 置 标签 的 for 属性 来 匹配 元 素 的 id 


实例 


<form method="post" action="demoform.html"> 
<label for="fname">#t% :</label> 

<input type="text" name="fname" id="fname"> 
</form> 


如 需 隐 藏 标 签 ， 请 使 用 class ui-hidden-accessible。 这 在 您 把 元 素 的 placeholder 属性 作为 标 
签 时 经 常用 到 : 


实例 


<form method="post" action="demoform.html"> 

<label for="fname" class="ui-hidden-accessible">st% :</label> 
<input type="text" name="fname" id="fname" placeholder="##%..."> 
</form> 


Field 容器 


如 需 让 标签 和 表单 元 素 看 起 来 更 适应 宽屏 ， 请 用 带 有 data-role="fieldcontain" 属性 的 <div> 或 
<fieldset> 元 素 包 围 label/form 元 素 : 


实例 


<form method="post" action="demoform.html"> 
<div data-role="fieldcontain"> 

<label for="fname">##:</label> 

<input type="text" name="fname" id="fname"> 
<label for="lname"> 名 :</label> 

<input type="text" name="lname" id="lname"> 
</div>> 

</form> 











@ fieldcontain 属性 基于 页 面 的 宽度 为 标签 和 表单 控件 添加 样式 。 当 页 面 的 宽度 大 于 
480px 时 ， 它 会 自动 把 标签 放置 在 与 表单 控件 同一 线 上 。 当 页 面 的 宽度 小 于 480px 时 ， 
标签 会 被 放置 在 表单 元 素 的 上 面 。 








提示 : 为 了 防止 jQuery Mobile 为 可 点 击 元 素 自动 添加 样式 ， 请 使 用 data-role="none" 属性 : 


W3School jQuery Mobile 教程 


实例 


<label for="fname"> 姓 名 :</label> 
<input type="text" name="fname" id="fname" data-role="none"> 


v jQuery Mobile 中 的 表单 提交 


jQuery Mobile 通过 AJAX 自动 处 理 表单 提交 ， 并 将 试图 集成 服务 器 响应 到 应 用 程序 的 
DOM 中 。 


jQuery Mobile 表单 
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jQuery Mobile 表单 输入 元 素 


jQuery Mobile 文本 输入 框 


输入 字段 是 通过 标准 的 HTML 元 素 编码 的 ，jQuery Mobile 将 为 它们 添加 样式 使 其 看 起 来 更 具 
吸引 力 ， 在 移动 设备 上 更 易 使 用 。 您 也 能 使 用 新 的 HTML5 的 <input> 类 型 : 


实例 


<form method="post" action="demo_form.php"> 

<div data-role="fieldcontain"> 

<label for="fullname"> 全 名 :</label> 

<input type="text" name="fullname" id="fullname"> 


<label for="bday"> 生 日 :</label> 
<input type="date" name="bday" id="bday"> 


<label for="email">E-mail:</label> 

<input type="email" name="email" id="email" placeholder=" 你 的 电子 邮箱 .."> 
</div> 

</form> 


提示 : 请 使 用 placeholder 来 指定 一 个 简短 的 描述 ， 用 来 描述 输入 字段 的 期 望 值 : 


<input placeholder="_sometext_"> 


文本 域 


对 于 多 行文 本 输入 可 使 用 <textarea> 。 
注意 : 当 您 键入 一 些 文本 时 ， 文 本 域 会 自动 调整 大 小 以 适应 新 增加 的 行 。 


实例 


<form method="post" action="demo_form.php"> 
<div data-role="fieldcontain"> 

<label for="info"> 附 加 信息 :</label> 

<textarea name="addinfo" id="info"></textarea> 
</div> 

</form> 


搜索 输入 框 


type="search" 类 型 的 输入 框 是 在 HTML5 中 新 增 的 ， 它 是 为 输入 搜索 定义 文本 字段 : 


实例 


<form method="post" action="demo_form.php"> 
<div data-role="fieldcontain"> 

<label for="search">#2% :</label> 

<input type="Ssearch" name="Search" id="search"> 
</div> 

</form> 


单 选 按钮 
当 用 户 在 有 限 数量 的 选择 中 仅 选 取 一 个 选项 时 ， 使 用 单 选 按钮 。 


为 了 创建 一 系列 单 选 按钮 ， 请 添加 带 有 type="radio" 的 input 以 及 相应 的 label。 把 单 选 按钮 
包围 在 <fieldset> 元 素 内 。 您 也 可 以 添加 一 个 <legend> 元 素来 定义 <fieldset> 的 标题 。 


提示 : 请 使 用 data-role="controlgroup" 来 把 按钮 组 合 在 一 起 : 


实例 


<form method="post" action="demo_form.php"> 

<fieldset data-role="controlgroup"> 

<legend>Choose your gender :</legend> 

<label for="male">Male</label> 

<input type="radio" name="gender" id="male" value="male"> 
<label for="female">Female</label> 

<input type="radio" name="gender" id="female" value="female"> 
</fieldset> 

</form> 


复 选 框 
当 用 户 在 有 限 数量 的 选择 中 选取 一 个 或 多 个 选项 时 ， 使 用 复 选 框 : 


实例 


<form method="post" action="demo_form.php"> 

<fieldset data-role="controlgroup"> 

<legend>Choose as many favorite colors as you'd like:</legend> 
<label for="red">Red</label> 

<input type="checkbox" name="favcolor" id="red" value="red"> 
<label for="green">Green</label> 

<input type="checkbox" name="favcolor" id="green" value="green"> 
<label for="blue">Blue</label> 

<input type="checkbox" name="favcolor" id="blue" value="blue"> 
</fieldset> 

</form> 


更 多 实例 


如 需 水 平 组 合 单 选 按钮 或 复 选 框 ， 请 使 用 data-type="horizontal" : 
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实例 


<fieldset data-role="controlgroup" data-type="horizontal"> 


您 也 可 以 用 一 个 field 容器 包围 <fieldset> : 
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实例 


<div data-role="fieldcontain"> 
<fieldset data-role="controlgroup"> 
<legend> 请 选择 您 的 性 别 :</legend> 
</fieldset> 

</div> 


如 果 您 想 要 您 的 按钮 中 的 一 个 预先 选中 ， 请 使 用 HTML 中 <input> 的 checked 属性 : 
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实例 


<input type="radio" checked> 
<input type="checkbox" checked> 


jQuery Mobile 表单 选择 菜单 


jQuery Mobile 选择 菜单 
Iphone 上 的 选择 菜单 : Android/SGS4 设备 上 的 选择 菜单 : 


ll NetCom 全 


Monday 


Tuesday 


Wednesday 


Thursday 


Friday 
v Monday 


Tuesday 


Saturday 


Sunday 
Wednesday 


<select> 元 素 创 建 带 有 若干 选项 的 下 拉 列 表 。 
<select> 元 素 内 的 <option> 元 素 定义 了 列表 中 的 可 用 选项 : 


实例 


<form method="post" action="demoform.html"> 
<fieldset data-role="fieldcontain"> 

<label for="day">Select Day</label> 

<select name="day" id="day"> 

<option value="mon">Monday</option> 

<option value="tue">Tuesday</option> 
<option value="wed">Wednesday</option> 
</select> 

</fieldset> 

</form> 





jQuery Mobile 表单 选 : 


CD 


Co 





提示 : 如 果 您 有 一 个 带 有 相关 选项 的 很 长 的 列表 ， 请 在 <select> 内 使 用 <optgroup> 元 素 : 


实例 


<select name="day" id="day"> 

<optgroup label="Weekdays"> 

<option value="mon">Monday</option> 
<option value="tue">Tuesday</option> 
<option value="wed">Wednesday</option> 
</optgroup> 

<optgroup label="Weekends"> 

<option value="sat">Saturday</option> 
<option value="sun">Sunday</option> 


</optgroup> 

</select> 

mo.) 、 Hy 
目 定义 选择 菜单 


o 


本 页 项 部 的 图 像 ， 演 示 了 移动 平台 上 如 何 使 用 它们 的 方式 展示 一 个 选择 菜单 


如 果 您 想 要 让 选择 菜单 在 所 有 的 移动 设备 上 都 显示 相同 ， 请 使 用 jQuery 自 带 的 自 定义 选择 
单 ，data-native-menu="false" 属性 : 


实例 


<select name="day" id="day" data-native-menu="false"> 


如 需 在 选择 菜单 中 选择 多 个 选项 ， 请 在 <select> 元 素 中 使 用 multiple 属性 : 


<select name="day" id="day" multiple data-native-menu="false"> 


更 多 实例 


使 用 data-role="controlgroup" 如 何 组 合 一 个 或 多 个 选择 菜单 。 


NI 


使 用 data-type="horizontal" 如 何 水 平 组 合 选 择 菜 单 。 


预选 中 选项 如 何 预选 中 一 个 选项 。 


4 


W3School jQuery Mobile 教程 


Tes 如 何 创 建 可 折 党 表单 。 


jQuery Mobile 表单 选择 菜单 
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jQuery Mobile 表单 滑动 条 


jQuery Mobile 滑动 条 控件 


滑动 条 人 允许 您 从 一 个 范围 的 数字 中 选择 一 个 值 : 


50 50 


如 需 创 建 滑动 条 ， 请 使 用 <input type="range"> : 


实例 


<form method="post" action="demoform.html"> 

<div data-role="fieldcontain"> 

<label for="points">Points:</label> 

<input type="range" name="points" id="points" value="50" min="0" max="100"> 
</div> 

</form> 


使 用 以 下 属性 来 规定 限制 : 


。 max - 规定 允许 的 最 大 值 
。 min - 规定 允许 的 最 小 值 
e step - 规定 合法 的 数字 间隔 
e value - 规定 默认 值 


提示 : 如 果 您 想 要 高 完 突 出 显示 滑动 条 的 值 ， 请 添加 data-highlight="true" : 
实例 
头 


<input type="range" data-hightlight="true"> 


拨 动 开 天 


波动 开关 通常 用 于 onoff 或 true/false 按钮 : 


如 需 创 建 一 个 开关 ， 请 把 <select> 元 素 与 data-role="slider" 一 起 使 用 ， 并 添加 两 个 <option> 
元 素 : 
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实例 


<form method="post" action="demoform.html"> 

<div data-role="fieldcontain"> 

<label for="Switch">Toggle Switch:</label> 

<select name="Switch" id="Switch" data-role="slider"> 
<option value="on">0n</option> 

<option value="off">0ff</option> 

</select> 

</div> 

</form> 


提示 : 请 使 用 "selected" 属性 来 设置 选项 中 的 一 个 为 预选 中 状态 〈 高 亮 突 出 显示 状态 ) 
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实例 


<option value="off" selected>0ff</option> 


jQuery Mobile 主题 


jQuery Mobile 主题 


jQuery Mobile 提供 了 5 种 不 同 的 主题 样式 , 从 "a" 到 "e" - 每 一 种 主题 的 按钮 ， 工 具 条 ， 内 容 块 
等 等 颜色 都 不 一 致 ， 每 个 主题 的 视觉 效果 也 不 一 样 。 


通过 设置 元 素 的 data-theme 属 性 可 以 自 定 义 应 用 的 外 观 : 


<div data-role="page" data-theme="a|b|c|d|e"> 


值 描述 实例 
a 默认 。 黑 色 背 景 白色 文字 
b 蓝 色 背景 白色 文字 / 黑色 文字 所 色 背 景 
c 黑色 文字 浅 灰 色 背 景 
d 黑色 为 主 白色 背景 
e 黑色 文字 橙色 背景 


= BAS 
3 你 喜欢 混合 主题 ! 


默认 情况 下 ， jQuery Mobile 使 用 "a" 主题 (黑色 ) 来 设置 头 部 和 底部 "o" 主题 (RIK) 
设置 页 面 内 容 。 但 是 ， 你 可 以 自 定 义 设置 你 喜欢 的 混合 主题 。 











主题 头 部 ， 内 容 和 底部 


实例 


<div data-role="header" data-theme="b"></div> 
<div data-role="content" data-theme="a"></div> 


<div data-role="footer" data-theme="e"></div> 


主题 对 话 框 


实例 


<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a> 


<div data-role="page" id="pagetwo" data-overlay-theme="e"> 
<div data-role="header" data-theme="b"></div> 
<div data-role="content" data-theme="a"></div> 
<div data-role="footer" data-theme="c"></div> 

</div> 


主题 按钮 
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实例 


<a href="#" data-role="button" data-theme="a">Button</a> 
<a href="#" data-role="button" data-theme="b">Button</a> 
<a href="#" data-role="button" data-theme="c">Button</a> 


主题 图 标 


Ww 


实例 


<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a> 


J ERA ECAH Ra 
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实例 


<div data-role="header"> 
<a href="#" data-role="button" data-icon="home" data-theme="b">Home</a> 
<hi>welcome To My Homepage</h1> 
<a href="#" data-role="button" data-icon="Search" data-theme="e">Search</a> 
</div> 


<div data-role="footer"> 
<a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a> 
<a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a> 
<a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a> 
</div> 


主题 导航 条 


44 


实例 


<div data-role="footer" data-theme="e"> 
<hi>Insert Footer Text Here</h1i> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home" data-theme="b">Button 1</a></1i> 
<li><a href="#" data-icon="arrow-r">Button 2</a></1li> 
<li><a href="#" data-icon="arrow-r">Button 3</a></1i> 
<li><a href="#" data-icon="Ssearch" data-theme="a" >Button 4</a></1li> 
</ul> 
</div> 
</div> 


EMA RAMAR 
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实例 


<div data-role="collapsible" data-theme="b" data-content-theme="e"> 
<hi>Click me - I'm collapsible!</h1i> 
<p>I'm the expanded content.</p> 

</div> 


主题 列表 


44 


实例 


<ul data-role="listview" data-theme="e"> 
<li><a href="#">List Item</a></1li> 
<li data-theme="a"><a href="#">List Item</a></1li> 
<li data-theme="b"><a href="#">List Item</a></1i> 
<li><a href="#">List Item</a></1li> 

</ul> 


主题 分 割 按钮 


44 


实例 


<ul data-role="listview" data-split-theme="e"> 


= MATT BWR 
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实例 


<div data-role="collapsible" data-theme="b" data-content-theme="e"> 
<ul data-role="listview"> 
<li><a href="#">Agnes</a></1li> 
</ul> 
</div> 


题 表单 
实例 


<label for="name">Full Name:</label> 
<input type="text" name="text" id="name" data-theme="a"> 


<label for="colors">Choose Favorite Color:</label> 
<select id="colors" name="colors" data-theme="b"> 
<option value="red">Red</option> 
<option value="green">Green</option> 
<option value="blue">Blue</option> 
</select> 


ERA ARA 
实例 


<fieldset data-role="collapsible" data-theme="b" data-content-theme="e"> 
<legend>Click me - I'm collapsible!</legend> 


添加 Ar 二 题 


jQuery Mobile 可 以 在 移动 页 面 添 加 新 主题 。 


通过 修改 CSS 文件 来 添加 或 编辑 新 主题 (如 果 你 已 经 下 载 了 jQuery Mobile), MRAR N HF 
式 模块 ， 然 后 重 命令 字 母 类 名 (fz) ,并 在 样式 中 添加 你 喜欢 的 颜色 和 字体 。 


你 也 可 以 在 HTML 文档 中 添加 主题 的 新 样式 - Ts 具 条 添加 3 类 : ui-bar-(a-z) , MAA 容 添 加 3 类 : 
ui-body-(a-z) for the content: 


实例 


<style> 

.Ui-bar-f 

{ 

color:green; 
background-color: yellow; 
.Ui-body-f 


font-weight :bold; 
color:purple; 


</style> 


jQuery Mobile 事件 


事件 = 所 有 不 同 访问 者 访问 页 面 的 响应 动作 。 


jQuery Mobile 事件 


在 jQuery Mobile 你 可 以 使 用 任何 标准 的 jQuery 事件 。 
除 此 之 外 , jQuery Mobile 也 提供 了 针对 移动 端 浏览 器 的 事件 : 


。 触摸 事件 - 当 用 户 触摸 屏幕 时 触发 

。 滑动 事件 - 当 用 户 上 下 滑动 时 触发 

。 定位 事件 - 当 设 各 水 平 或 垂直 翻转 时 触发 

。 页 面 事件 - 当 页 面 显示 ， 人 隐藏 ， 创 建 ， 加 载 或 未 加 载 时 触发 


初始 化 jQuery Mobile 事件 


在 学 习 jQuery 时 我 们 学 到 了 用 $(document).ready() 来 使 你 的 jQuery 代码 脚本 在 DOM 元 素 加 载 
完成 后 才 开 始 执 行 : 


jQuery document ready 事件 


<script> 
$(document ) ,ready(function(){ 


_// jQuery methods go here... 


</script> 


但 是 ， 在 jQuery Mobile 4, 使 用 pageinit 事件 来 设置 代码 脚本 在 DOM 元 素 加 载 完成 后 开始 执 
行 ， 所 以 要 在 任何 新 页 面 加 载 并 创建 是 执行 脚本 ， 就 需要 绑 定 pageinit 事 件 。 


第 二 个 参数 ("#pageone") 为 指定 事件 的 页 面 id : 


jQuery Mobile pageinit 事件 


<script> 
$( document ).on("pageinit", "#pageone", function(){ 


_// jQuery events go here..._ 


}); 


</script> 


6) 


注意 : jQuery on() 方法 用 于 绑 定 事件 到 选中 的 元 素 上 。 


下 一 章节 我 们 将 更 详细 介绍 jQuery Mobile 事件 。 


jQuery Mobile 触摸 事件 


触摸 事件 在 用 户 触摸 屏幕 (页面 ) 时 触发 。 


点 击 或 者 滑动 本 区 域 














时 触摸 事件 同样 可 应 用 与 桌面 电脑 上 : 点 击 或 者 滑动 鼠标 ! 











jQuery Mobile 点 击 


点 击 事件 在 用 户 点 击 元 素 时 触发 。 


如 下 实例 : 当 点 击 <p> 元 素 时 ， 人 隐藏 当前 的 <p> 元 素 : 


实例 


$("p").on("tap", Function(){ 
$(this) .hide(); 
}); 


jQuery Mobile RH& AM (KH) 


点 击 不 放 (KR) 事件 在 点 击 并 不 放 (大 约 一 秒 ) 后 触发 


实例 


$("p").on("taphold",function(){ 
$(this).hide(); 
}); 


jQuery Mobile 滑动 


滑动 事件 是 在 用 户 一 秒 内 水 平抑 搜 太 于 30PX， 或 者 纵向 拖 虑 小 于 20px 的 事件 发 生 时 触发 的 事 
件 : 


实例 


$("p").on("swipe", function(){ 
$("span").text("Swipe detected!"); 


了 


jQuery Mobile 向 左 滑动 


向 左 滑动 事件 在 用 户 向 左 拖 动 元 素 大 于 30px 时 触发 : 


实例 


$("p").on("swipeleft",function(){ 
alert("You swiped left!"); 
}); 


jQuery Mobile 向 右 滑动 


向 右 滑动 事件 在 用 户 向 右 拖 动 元 素 大 于 30px 时 触发 : 


实例 


$("p").on("swiperight",function(){ 
alert("You swiped right!"); 
}); 


jQuery Mobile 滚屏 事件 

jQuery Mobile 提供 了 两 种 滚屏 事件 : 滚屏 开始 时 触发 和 滚动 结束 时 触发 。 
jQuery Mobile 滚屏 开始 (Scrollstart) 
scrollstart 事件 是 在 用 户 开始 滚动 页 面 时 触发 : 


实例 


$(document).on("scrollstart", function(){ 
alert("Started scrolling!"); 


3); 


@ 注意 : iOS 设备 在 滚屏 时 锁定 DOM 操作 ， 这 意味 着 当 用 户 滚屏 时 不 可 能 改变 任何 
东西 。 然 而 ，jQuery 团队 正在 为 此 寻找 解决 方案 。 








jQuery Mobile 滚屏 结束 (Scrollstop) 


scrollstop 事件 是 在 用 户 停止 滚动 页 面 时 触发 : 


实例 


$(document).on("scrollstop",function(){ 
alert("Stopped scrolling!"); 
}); 


jQuery Mobile 方向 改变 事件 


jQuery Mobile 方向 改变 (orientationchange) 事件 


当 用 户 垂直 或 水 平 旋转 移动 设备 时 ， 触 发 方向 改变 (orientationchange) 事件 。 
水 平 旋转 垂直 旋转 





如 需 使 用 方向 改变 (orientationchange) 事件 ， 请 附加 它 到 window 对 象 : 


$(window) .on("orientationchange", function(){ 
alert("The orientation has changed!"); 


3); 


Dy NAAaA—-TSX, event 对 象 ， 返 回 移动 设备 的 方向 : "纵向 "(设备 保持 在 垂直 位 置 ) 
或 "横向 " (设备 保持 在 水 平 位 置 ) 


实例 

N 
$(window).on("orientationchange", function(event ) { 
alert("Orientation is: " + event.orientation); 
}); 


由 于 方向 改变 (orientationchange) 事件 绑 定 到 window 对 象 ， 我 们 可 以 使 用 
window.orientation 属性 来 设置 不 同 的 样式 ， 以 便 区 分 纵向 和 横向 的 视图 : 


实例 


$(window) .on("orientationchange", function(){ 
if(window.orientation == 0) // Portrait 


$("p").css({"background-color": "yellow", "font-size":"300%"}) ; 
else // Landscape 
$("p").css({"background-color": "pink", "font-size":"200%"}) ; 


3); 


9 window.orientation 属性 针对 纵向 视图 返回 0， 针 对 横向 视图 返回 90 或 -90。 


jQuery Mobile Data 属性 


jQuery Data 属性 

jQuery Mobile 使 用 HTML5 data-* 属性 来 为 移动 设备 创建 更 具 触 摸 友好 性 和 吸引 性 的 外 观 。 
在 下 面 的 参考 列表 中 ， 粗 体 显示 的 值 为 默认 值 。 

按钮 


带 有 data-role="button" 的 超 链接 。button 元 素 、 工 具 栏 中 的 链接 以 及 input 字段 都 会 自动 泻 
染 成 按钮 样式 ， 不 需要 添加 data-role="button". 


Data- 属 性 值 描述 
data-corners true | false 规定 按钮 是 否 圆 角 
modo H z TE 、 没 
data-icon Icons 参考 手册 Ak 图 表 。 默 认 没有 


left | right | top | bottom | 


data-iconpos 规定 图 标的 位 置 

notext 
data- io doh -Ba = 
, true | false 规定 按钮 图 标 是 否 有 阴影 
iconshadow 
data-inline true | false 规定 按钮 是 否 内 联 
data-mini true | false 规定 按钮 是 小 尺寸 还 是 常规 尺寸 
data-shadow true | false 规定 按钮 是 否 有 阴影 
data-theme letter (a-z) 规定 按钮 的 主题 颜色 


Q 如 需 组 合 多 个 按钮 ， 请 使 用 带 有 data-role="controlgroup" 属性 和 data- 
type="horizontallvertical" 的 容器 来 规定 是 否 水 平 或 垂直 组 合 按钮 。 





复 选 框 


带 有 type="checkbox" 的 成 双 成 对 的 label 和 input。 它 们 会 被 自动 泻 染 程 按 钮 样式 ，data- 
role 不 是 必需 的 。 


Data- 属 性 值 描述 
data-mini true | false 规定 复 选 框 是 小 尺寸 还 是 常规 尺寸 
data-role none 防止 jQuery Mobile 把 复 选 框 泻 染 成 按钮 样式 
data-theme letter (a-z) 规定 复 选 框 的 主题 颜色 


时 如 需 组 合 多 个 复 选 框 ， 请 使 用 带 有 data-role="controlgroup" 属性 和 data- 
type="horizontallvertical" 的 容器 来 规定 是 否 水 平 或 垂直 组 合 复 选 框 。 


Ad ak 


在 带 有 data-role="collapsible" 的 容器 内 部 的 后 跟 任意 HTML 标记 的 标题 元 素 。 


Data- 属 性 
data-collapsed 


data-collapsed- 
icon 


data-content- 
theme 


data-expanded- 
icon 


data-iconpos 


data-inset 
data-mini 


data-theme 


可 折 得 集合 


值 


true | false 


Icons 参考 手册 


letter (a-z) 


Icons 参考 手册 
left | right | top | 
bottom 

true | false 

true | false 


letter (a-z) 


描述 
规定 内 容 是 折 咎 还 是 展开 


规定 可 折 和 县 按钮 的 图 标 。 默 认 是 "plus" 


规定 可 折 受 内 容 的 主题 颜色 。 是 否 为 可 折 且 内 
容 添 AND 圆 角 


规定 当 内 容 展开 时 可 折 和 有 登 按钮 的 图 标 。 默 认 是 
"minus" 


规定 图 标的 位 置 


规定 可 折 和 有 登 按钮 是 否 泻 染 成 圆 角 且 带 外 边 
规定 可 折 党 按钮 是 小 尺寸 还 是 常规 尺寸 
AED eas awe 


在 带 有 data-role="collapsible-set" HAs ARAFAT A ARH. 


Data- 属 性 值 描述 


data- , Icons 参考 手册 WED BRN Ate. Bice "plus" 
collapsed-icon 


data-content- 


R letter (a-z) 规定 可 折 受 按钮 的 主题 颜色 
data- Icons 参考 手册 MEHARRA IH Ë E PRAIA ro A 
expanded-icon iz "minus 


left | right | top | bottom 


data-iconpos nots 规定 图 标的 位 置 

data-inset true | false 规定 可 折 和 县 块 是 否 泻 染 成 圆 角 且 带 外 边 距 
data-mini true | false 规定 可 折 受 按钮 是 小 尺寸 还 是 常规 尺寸 
data-theme letter (a-z) 规定 可 折 受 集合 的 主题 颜色 


内 容 


带 有 data-role="content" 的 容器 。 


Data- 属 性 值 描述 
data-theme letter (a-z) 规定 内 容 的 主题 颜色 。 默 认 是 "cn" 
控件 组 


带 有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器 。 组 合 单个 类 型 (基于 链接 的 按 
钮 、 单 选 按钮 、 复 选 框 、select 元 素 ) 的 多 个 按钮 样式 的 input。 对 于 组 合 表 单 复 选 框 和 单 选 
按钮 ， 推 荐 在 带 有 data-role="fieldcontain" 的 <div> 内 使 用 <fieldset> 容器 来 改进 标签 样式 。 


Data- 属 性 值 描述 
data-mini true | false 规定 控件 组 是 小 尺寸 还 是 常规 尺寸 
data-type horizontal | vertical 规定 控件 组 是 水 平 显示 还 是 垂直 显示 


对 话 框 


带 有 data-role="dialog" 的 容器 或 带 有 data-rel="dialog" 的 链接 。 


Data- 属 


述 
data- 
close- sometext ， 规 定 对 话 框 关 闭 按钮 的 文本 
btn-text 
na true | 规定 是 否 清 除 各 个 页 面 的 jQuery DOM 缓存 (如 果 设 置 为 
ane false true， 您 必须 自己 管理 DOM 并 在 所 有 移动 设备 上 进行 测试 ) 
data- 
Byerley: le 规定 对 话 框 页 面 的 蒙 版 (背景 ) 颜色 
theme 
SOME letter (a- 规定 对 话 框 页 面 的 主题 颜色 
theme Z) 


data-title sometext ”规定 对 话 框 页 面 的 标题 


增强 


带 有 data-enhance="false" 或 data-ajax="false" 的 容器 。 


Data- 属 值 描述 

性 
data- oe 如 果 设 置 为 "true" (默认 ) , jQuery Mobile 会 自动 泻 染 页 面 ， 使 其 
enhance 全 更 适合 于 移动 设备 。 如 果 设 置 为 "false"， 框 架 将 不 会 泻 染 页 面 
data- Mue 
; | 规定 是 否 通过 ajax MARA 
ajax 

false 


注意 : data-enhance="false" 必须 与 $.mobile.ignoreContentEnabled=true" 一 同 使 用 来 阻止 
jQuery Mobile 自动 泻 染 页 面 。 


当 $.mobile.ignoreContentEnabled 设置 为 true 时 ，data-ajax="false" 容器 内 的 任何 链接 或 表 
单元 素 将 会 被 框架 的 导航 功能 忽略 。 


> D 
域 容器 
包围 在 label/ 表 单元 素 对 周围 的 带 有 data-role="fieldcontain" 的 容器 。 


固定 工具 栏 


带 有 data-role="header" 或 data-role="footer"， 并 带 有 data-position="fixed" 属性 的 容器 。 


Data- 属 


data- 
fullscreen 


data-tap- 
toggle 


data- 
transition 


data- 
update- 
page- 
padding 


data- 
visible- 
on-page- 
show 


翻转 拨 动 开 天 


规定 工具 栏 是 否 一 直 固 定 在 顶部 或 底部 


规定 用 户 是 否 能 够 通过 点 击 改变 工具 栏 的 可 见 性 


规定 当 点 击发 生 时 的 切换 效果 


规定 页 面 顶 部 和 底部 的 内 边 距 是 否 在 resize, transition 和 
"updatelayout" 事件 发 生 时 更 新 (jQuery Mobile 在 "pageshow" 
事件 发 生 时 总 是 更 新 内 边 距 ) 


一 个 带 有 data-role="slider" 的 <select> 元 素 和 两 个 <option> 元 素 。 


Data- 属 性 


data-mini 


data-role 


data-theme 


data-track-theme 


尾部 栏 


值 描述 
true | false 规定 开关 是 小 尺寸 还 是 常规 尺寸 
none 防止 jQuery Mobile 把 拨 动 开关 泻 染 成 按钮 样式 
letter (a-z) 规定 找 动 开关 的 主题 颜色 
letter (a-z) 规定 轨道 的 主题 颜色 


带 有 data-role="footer" 的 容器 。 


Data- 属 性 
data-id 


data- 
position 


data- 
fullscreen 


data-theme 


{6 
sometext 


inline | 
fixed 


true | 
false 


letter (a-z) 


描述 
规定 唯一 ID。 对 于 持续 的 尾部 栏 是 必需 的 
规定 尾部 栏 是 与 页 面 内 容 内 联 还 是 保持 固定 在 底部 


规定 尾部 栏 是 固定 在 底部 还 是 覆盖 在 页 面 内 容 上 (查看 范 
围 更 大 ) 


规定 尾部 栏 的 主题 颜色 。 默 认 是 "a" 





注意 : 如 需 启 用 全 屏 定 位 ， 请 使 用 data-position="fixed"， 然 后 添加 data-fullscreen 属性 到 元 


RE, 


关 部 栏 


带 有 data-role="header" 的 容器 。 


Data- 属 性 
data-id 


data- 
position 


data- 
fullscreen 


data-theme 


值 
sometext 


inline | 
fixed 


true | 
false 


letter (a-z) 


描述 
规定 唯一 ID。 对 于 持续 的 头 部 栏 是 必需 的 
规定 头 部 栏 是 与 页 面 内 容 内 联 还 是 保持 固定 在 顶部 


规定 头 部 栏 是 固定 在 顶部 还 是 覆盖 在 页 面 内 容 上 (查看 范 
围 更 大 ) 


规定 头 部 栏 的 主题 颜色 。 默 认 是 "a' 





注意 : 如 需 启 用 全 屏 定 位 ， 请 使 用 data-position="fixed"， 然 后 添加 data-fullscreen 属性 到 元 


素 上 。 


链接 


所 有 的 链接 ， 包 含 那些 带 有 data-role="button" 的 链接 和 表单 提交 按钮 。 


Data- 属 
性 


data- 
ajax 


data- 
direction 


data- 
dom- 
cache 


data- 
prefetch 


data-rel 


data- 
transition 


data- 
position- 
to 


列表 


值 


true | false 


reverse 


true | false 


true | false 


back | dialog | 
external | popup 


fade | flip | flow | 
pop | slide | 
slidedown | 
slidefade | slideup 
| turn | none 


origin | jQuery 
selector | window 


描述 


规定 是 否 通过 ajax 加 载 页 面 来 提高 用 户 体验 和 交 
互 。 如 果 设 置 为 false，jQuery Mobile 将 会 执行 一 个 
正常 的 页 面 请 求 。 


反 向 转换 动画 ( 仅 用 于 页 面 和 对 话 框 ) 


规定 是 否 清除 各 个 页 面 的 jQuery DOM 缓存 (如 果 设 
置 为 true， 您 必须 自己 管理 DOM 并 在 所 有 移动 设备 
上 进行 测试 ) 


规定 是 否 预先 读 取 页 面 到 DOM 中 ， 以 便当 用 户 访问 
它们 时 可 用 


规定 链接 行为 的 选项 。Back - 回 退 到 历史 记录 中 的 前 
一 个 页 面 。Dialog - 以 对 话 框 形式 打开 链接 ， 不 保存 
到 历史 记录 中 。External - 用 于 链接 到 另 一 个 域 。 
Popup - 打开 一 个 弹出 窗口 。 


规定 一 个 页 面 切 换 到 下 一 个 页 面 的 效果 。 请 查看 我 们 
的 jQuery Mobile 页 面 切 换 章节 。 


规定 弹出 框 的 位 置 。Origin - 默认 。 定 位 漳 窗 在 打开 
它 的 链接 上 。jQuery selector - 定位 弹 窗 在 指定 元 素 
E, Window - 定位 漳 窗 在 窗口 屏幕 的 中 央 。 


带 有 data-role="listview" 的 <ol> 或 <ul>。 


Data- 属 性 值 描述 


data-autodividers true | false 规定 是 否 自 动 划分 列表 项 

data-count-theme letter (a-z) 规定 计数 气泡 的 主题 颜色 。 默 认 是 "c" 

data-divider-theme letter (a-z) 规定 列表 分 隔 的 主题 颜色 。 默 认 是 "b" 

data-filter true | false 规定 是 否 在 列表 中 添加 搜索 框 

-fi a cb 人 p ew 

data-filter Sonia 规定 搜索 框 内 的 文本 。 默认 是 "Filter 

placeholder items... 

data-filter-theme letter (a-z) 规定 搜索 过 小 的 主题 颜色 。 上 默认 是 "e" 
参 

data-icon aie ZF 规定 列表 的 图 标 

data-inset true | false 规定 列表 是 否 泻 染 成 圆 角 且 带 外 边 距 
EB =e ral 5 ew "m 

data-split-icon a 参考 于 规定 分 割 按钮 的 图 表 。 默 认 是 "arrow-r 

data-split-theme letter (a-z) ED BRAS MMB. Rize "b" 

data-theme letter (a-z) 规定 列表 的 主题 颜色 


列表 项 


带 有 data-role="listview" 的 <ol> 或 <ul> 内 的 <li>, 


Data- 属 什 描述 
性 
data- eee 规定 当 过 滤 元 素 时 要 搜索 的 文本 。 该 文本 将 会 被 过 滤 ， 而 不 
filtertext 是 实际 的 列表 项 文本 
参 os p 
data-icon Ea = 规定 列表 项 图 标 


data-role _list-divider 规定 列表 项 的 分 隔 


data- 


- AS | m AS + 是 A 
reais letter (a-z) ”规定 列表 项 的 主题 颜色 


注意 : data-icon 属性 只 作用 于 带 有 链接 的 列表 项 。 


导航 栏 


带 有 data-role="navbar" 容器 内 部 的 <li> 元 素 。 


Data- 属 性 值 描述 


data-icon Icons 参考 手册 规定 列表 项 的 图 标 
data-iconpos left | right | top | bottom | notext 规定 图 标的 位 置 


9 导航 栏 从 他 们 的 父 容器 中 继承 了 主题 样本 。 为 导航 栏 设置 data-theme 属性 是 不 可 
能 的 。 可 以 为 导航 栏 中 的 每 个 链接 单独 设置 data-theme 属性 。 


nH 


带 有 data-role="page" 的 容器 。 


Data- 属 性 值 描述 

data-add- true | B i 

back-btn false 自动 添加 后 退 按钮 ， 仅 限 头 首 Bye 

data- 

back-btn- sometext 规定 后 退 按钮 的 一 些 文本 

text 

o letter (a-a apaa ana 

back-btn- z) 规定 后 退 按钮 的 主题 颜色 

theme 

data- 

close-btn- a 规定 对 话 框 上 关闭 按钮 的 一 些 文本 

text 

data-dom- true | 规定 是 否 清 除 各 个 页 面 的 jQuery DOM 缓存 〈 如 果 设 置 
cache false true， 您 必 须 自己 管理 DOM 并 在 所 有 移动 设备 上 进行 测 er 
data- 

SETE- o 规定 对 话 框 页 面 的 蒙 版 背景) 颜色 

theme 

data- letter (a- e > 2s) E nan 

页 面 的 主题 颜色 。 黑 

‘ene z) 规定 页 面 的 主题 颜色 。 默 认 是 "c 

data-title sometext 规定 页 面 标题 

data-url url 更 新 URL 的 值 ， 而 不 是 用 于 请 求 页 面 的 URL 
voto 
7% É 


带 有 data-role="popup" 的 容器 。 


Data- 属 性 


data-corners 


data-overlay- 


theme 


data-shadow 


data-theme 


data-tolerance 


值 


true | false 
letter (a-z) 
true | false 
letter (a-z) 


30, 15, 30, 
15 


带 有 data-rel="popup" 的 锚 : 


规定 弹 窗 是 否 圆 角 


定 
规定 弹出 框 的 蒙 版 (背景 ) 颜色 。 默 认 是 透明 背景 
(无 


规定 弹出 框 是 否 有 阴影 

规定 弹出 框 的 主题 颜色 。 默 认 是 继承 的 ，"none'" 设置 
弹 窗 为 透明 的 

规定 窗口 边缘 (上 top、 右 right、 下 bottom, Æ left) 
的 距离 





描述 


> 规定 弹出 框 的 位 置 。Origin - 默认 。 定 位 弹 窗 在 
打开 它 的 链接 上 。jQuery selector - 定位 弹 窗 在 指 
ETRE, Window - 定位 弹 窗 在 窗口 屏幕 的 中 
央 。 


用 于 打开 弹出 框 


规定 一 个 页 面 切换 到 下 一 个 页 面 的 效果 。 请 查看 
我 们 的 jQuery Mobile 页 面 切换 章节 。 


带 有 type="radio" 的 成 双 成 对 的 label 和 input。 它 们 会 被 自动 泻 染 程 按钮 样式 ，data-role 不 


Data- 属 
性 g 
aan rigin | jQuer 
position- oe 
A selector | window 
data-rel popup 
fade | flip | flow | pop | 
data- slide | slidedown | 
transition slidefade | slideup | 
turn | none 
ws m4 
单 选 按钮 
是 必需 的 。 
Data- 
属性 值 
data- true | 
mini false 
data- none 
role 
data- letter ae 
y 
theme (a-z) MEF? 


描述 


规定 按钮 是 小 尺寸 还 是 常规 尺寸 


防止 jQuery Mobile 泻 染 单 选 按钮 的 样式 为 增强 状态 的 按钮 ， 使 元 


素 以 HTML 原生 的 状态 显示 


安 钮 的 主题 颜色 


9 如 需 组 合 多 个 单 选 按钮 ， 请 使 用 带 有 data-role="controlgroup" 属性 和 data- 
type="horizontallvertical" 的 容器 来 规定 是 否 水 平 或 垂直 组 合 单 选 按钮 。 


选择 


所 有 的 <select> 元 素 。 这 些 会 


Data- 属 性 


data-icon 


data- 
iconpos 


data-inline 
data-mini 


data- 
native- 
menu 


data- 
overlay- 
theme 


data- 
placeholder 


data-role 


data-theme 


值 


Icons 参考 
手册 


left | right | 


top | 
bottom | 


notext 
true | false 


true | false 


true | false 


letter (a-z) 


true | false 


none 


letter (a-z) 


被 自动 泻 染 成 按钮 样式 ，date-role 是 不 必需 的 。 


描述 


规定 select 元 素 的 图 标 。 默 认 是 "arrow-d" 


规定 图 标的 位 置 


BAK 
规定 select 元 素 是 小 尺寸 还 是 常规 尺寸 
当 设 置 为 false 时 ， 它 使 用 jQuery 自 带 的 自 定义 的 选择 菜 


单 〈 如 果 您 想 要 让 选择 菜单 在 所 有 的 移动 设备 上 都 显示 相 
同 ， 则 推荐 这 么 使 用 ) 


规定 select THE 


规定 jQuery 自 带 的 自 定 义 的 选择 菜单 的 主题 颜色 (和 与 
data-native-menu="false" 一 起 使 用 ) 


可 在 一 个 非 原生 的 选择 菜单 的 <option> 元 素 上 设置 


防止 jQuery Mobile 把 select 元 素 泻 染 成 按钮 样式 
规定 select 元 素 的 主题 颜色 


Q 如 需 组 合 多 个 select 元 素 ， 请 使 用 带 有 data-role="controlgroup" 属性 和 data- 


type="horizontallvertical" 的 容器 来 规定 是 否 水 平 或 垂直 


组 合 select 元 素 。 


滑动 块 


带 有 type="range" 的 输入 框 。 这 些 


Data- 属 性 
data-highlight 
data-mini 
data-role 
data-theme 


data-track-theme 


值 
true | false 
true | false 
none 
letter (a-z) 


letter (a-z) 


会 被 自动 泻 染 成 按钮 样式 ，date-role 是 不 必需 的 。 


防止 jQuery Mobile 泻 染 滑动 块 控件 为 按钮 样式 
规定 滑动 块 控件 (输入 框 、 手 柄 和 轨道 ) 的 主题 颜色 
规定 滑动 块 轨道 的 主题 颜色 


文本 输入 框 & 文本 输入 域 


带 有 type="textlsearchletc." 的 input 或 textarea 元 素 。 这 些 会 被 自动 泻 染 成 按钮 样式 ，date- 
role 是 不 必需 的 。 


Data- 属 性 值 描述 
data-mini true | false 规定 输入 框 是 小 尺寸 还 是 常规 尺寸 
data-role none 防止 jQuery Mobile 把 输入 框 /输入 域 泻 染 成 按钮 样式 


data-theme letter (a-z) 规定 输入 字段 的 主题 颜色 


jQuery Mobile 图 标 


jQuery 图 标 
在 jQuery Mobile 中 ， 如 需 为 按钮 添加 图 标 ， 请 使 用 data-icon 属性 : 


<a href="#anylink" data-role="button" **data-icon="refresh"**>Refresh Page</a> 


提示 : 在 <button> 或 <input> 元 素 中 ， 您 也 可 以 使 用 data-icon 属性 。 


下 面 我 们 列 出 了 jQuery Mobile 提供 的 所 有 可 用 图 标 : 


属性 值 描述 标 实例 
data-icon="arrow-l" 左 箭头 
data-icon="arrow-r" 右 箭头 
data-icon="arrow-u" 上 箭头 
data-icon="arrow-d" 下 箭头 
data-icon="plus" 加 号 
data-icon="minus" 减 号 
data-icon="delete" 删除 
data-icon="check" 检查 
data-icon="home" 首页 
data-icon="info" Epc 
data-icon="grid" 网 格 
data-icon="gear" 工具 
data-icon="search" 搜索 
data-icon="back" 后 退 
data-icon="forward" 前 进 
data-icon="refresh" 更 新 
data-icon="star" BS 
data-icon="alert" 和 警告 


jQuery Mobile 事件 


jQuery Mobile 事件 参考 手册 


以 下 列表 为 所 有 的 jQuery Mobile 事件 。 
请 使 用 on() 方法 绑 定 事件 。 


SS 
ÆA : 


事件 


hashchange 


navigate 


orientationchange 


pagebeforechange 


pagebeforecreate 
pagebeforehide 
pagebeforeload 


pagebeforeshow 


pagechange 


pagechangefailed 


pagecreate 
pagehide 
pageinit 
pageload 
pageloadfailed 
pageremove 


pageshow 


描述 


启用 可 标记 #hash 历史 ， 哈 希 值 会 在 一 次 独立 的 点 击 时 发 生 时 变 
化 ， 比 如 一 个 用 户 点 击 后退 按 钮 ， 会 通过 hashchange 事 件 进行 处 
理 。 


138  hashchange 和 popstate 的 事件 
方向 改变 事件 ,在 用 户 垂直 或 者 水 平 旋转 移动 设备 时 触发 。 


在 页 面 切 换 之 前 ， 触 发 的 事件 。 使 用 $.mobile.changePage() 来 切 
换 页 面 ， 此 方法 触发 2 个 事件 ， 切 换 之 前 的 pagebeforechange 事 
件 ， 和 切换 完成 后 pagechange (成 功 ) 或 者 

pagechangefailed (失败 ) 。 


页 面 初始 化 时 ， 初 始 化 之 前 触发 。 

在 页 面 切换 后 旧 页 面 隐藏 之 前 ， 触 发 的 事件 。 
在 加 载 请 求 发 出 之 前 触发 

在 页 面 切换 后 显示 之 前 ， 触 发 的 事件 。 


在 页 面 切换 成 功 后 ， 触 发 的 事件 。 使 用 $.mobile.changePage() 来 
切换 页 面 ， 此 方法 触发 2 个 事件 ， 切 换 之 前 的 pagebeforechange 事 
件 ， 和 切换 完成 后 pagechange (成 功 ) 或 者 

pagechangefailed (失败 ) 。 


在 页 面 切换 失败 时 ， 触 发 的 事件 。 使 用 $.mobile.changePage() 来 
切换 页 面 ， 此 方法 触发 2 个 事件 ， 切 换 之 前 的 pagebeforechange 事 
件 ， 和 切换 完成 后 pagechange (成 功 ) 或 者 

pagechangefailed (失败 ) 。 


在 页 面 创 建成 功 之 后 ， 触 发 的 事件 ,但 增强 完成 之 前 。 
在 页 面 切换 后 老 页 面 隐藏 之 后 ， 触 发 的 事件 。 

在 页 面 页 面 初始 化 时 ， 触 发 的 事件 。 

在 页 面 完 全 加 载 成 功 后 触发 。 

如 果 页 面 请 求 失败 触发 。 

在 窗口 视图 从 DOM 中 移 除外 部 页 面 之 前 触发 。 

在 过 渡 动 画 完 成 后 ， 在 "到 达 " 页 面 触发 。 


scrollstart 
scrollstop 
swipe 
swipeleft 
swiperight 

tap 

taphold 
throttledresize 
updatelayout 
vclick 
vmousecancel 
vmousedown 
vmousemove 
vmouseout 
vmouseover 


vmouseup 


当 用 户 开 始 滚动 页 面 时 触发 。 

当 用 户 停止 滚动 页 面 时 触发 。 

当 用 户 在 元 素 上 水 平滑 动 时 触发 。 
当 用 户 从 左 划 过 元 素 超 过 30px 时 触发 。 
当 用 户 从 右 划 过 元 素 超 过 30px 时 触发 。 
当 用 户 敲 击 某 元 素 时 触发 。 

当 元 素 敲 击 某 元 素 并 保持 一 秒 时 触发 。 
启用 可 标记 #hash 历史 记录 

由 动态 显示 /隐藏 内 容 的 jQuery Mobile 组 件 触发 。 
虚拟 化 的 click 事件 处 理 器 

虚拟 化 的 mousecancel 事件 处 理 器 
虚拟 化 的 mousedown 事件 义理 器 
虚拟 化 的 mousemove 事件 处 理 器 
虚拟 化 的 mouseout 事件 处 理 器 

虚拟 化 的 mouseover 事件 处 理 器 
虚拟 化 的 mouseup 事件 处 理 器 


jQuery Mobile 页 面 事件 


jQuery Mobile 页 面 事件 


在 jQuery Mobile 中 与 页 面 打 交道 的 事件 被 分 为 四 类 : 


e Page Initialization - 在 页 面 创 建 前 ， 当 页 面 创 建 时 ， 以 及 在 页 面 初 始 化 之 后 
e Page Load/Unload - 当 外 部 页 面 加载 时 、 介 载 时 或 遭遇 失败 时 

e Page Transition - 在 页 面 过 渡 之 前 和 之 后 

e Page Change - 当 页 面 被 更 改 ， 或 遭遇 失败 时 


如 需 关于 所 有 jQuery Mobile 事件 的 完整 信息 ， 请 访问 我 们 的 jQuery Mobile 事件 参考 手册 。 


jQuery Mobile Initialization 事件 


当 jQuery Mobile 中 的 一 张 典 型 页 面 进行 初始 化 时 ， 它 会 经 历 三 个 阶段 : 


。 在 页 面 创建 前 
。 页 面 创建 
。 页 面 初 始 化 


每 个 阶段 触发 的 事件 都 可 用 于 插入 或 操作 代码 。 


事件 描述 
当 页 面 即将 初始 化 ， 并 且 在 jQuery Mobile 已 开始 增强 页 面 之 前 ， 
pagebeforecreate 触发 该 事件 。 
pagecreate 当 页 面 已 创建 ， 但 增强 完成 之 前 ， 触 发 该 事件 。 
ini 当 页 面 已 初始 化 ， 并 且 在 jQuery Mobile 已 完成 页 面 增强 之 后 ， 触 
pageinit ae 
发 该 事件 。 


下 面 的 例子 演示 在 jQuery Mobile 中 创建 页 面 时 ， 何 时 触发 每 种 事件 : 


实例 


$(document ).on("pagebeforecreate", function(event ) { 
alert(" 触 发 pagebeforecreate 事 件 1"); 

}); 

$(document).on("pagecreate",function(event){ 
alert(" 触 发 pagecreate 事件 !"); 

}); 

$(document).on("pageinit",function(event){ 
alert(" 触 发 pageinit 事件 !") 

}); 


jQuery Mobile Load 事件 


页 面 加 载 事 件 属 于 外 部 页 面 。 


无 论 外 部 页 面 何 时 载 和 人 DOM， 将 触发 两 个 事件 。 第 一 个 是 pagebeforeload， 第 二 个 是 
pageload (成 功 ) 或 pageloadfailed (失败 ) 。 


下 表 中 解释 了 这 些 事件 : 
事件 描述 
pagebeforeload ， 在 任何 页 面 加 载 请 求 作 出 之 前 触发 。 
pageload 在 页 面 已 成 功 加 载 并 插入 DOM 后 触发 。 


如 果 页 面 加 载 请 求 失败 ， 则 触发 该 事件 。 默 认 地 ， 将 显示 "Error 


pageloadfailed Loading Page" 消息 。 


下 列 演示 pageload 和 pagloadfailed 事件 的 工作 原理 : 


实例 


$(document).on("pageload",function(event, data) { 
alert(" 触 发 pageload 事件 ! \nURL: " + data.url); 

J); 

$(document).on("pageloadfailed", function(event, data) { 
alert("; 抱 葡 ， 被 请 求 页 面 不 存在 。" ) ; 

3); 


jQuery Mobile 过 渡 事件 


我 们 还 可 以 在 从 一 页 过 渡 到 下 一 页 时 使 用 事件 。 


页 面 过 渡 涉 及 两 个 页 面 : 一 张 "来 "的 页 面 和 一 张 "去 "的 页 面 - 这 些 过 渡 使 当前 活动 页 面 (" 来 
的 "页 面 ) 到 新 页 面 (" 去 的 "页 面 的 改变 过 程 变 得 更 加 动感 。 


事件 描述 
pagebeforeshow 在 "去 的 "页 面 触发 ， 在 过 渡 动画 开始 前 。 
pageshow 在 "去 的 "页 面 触发 ， 在 过 渡 动画 完成 后 。 
pagebeforehide 在 "来 的 "页 面 触发 ， 在 过 渡 动画 开始 前 。 
pagehide 在 "来 的 "页 面 触发 ， 在 过 渡 动画 完成 后 。 


下 列 演示 了 过 渡 时 间 的 工作 原理 : 


实例 


$(document ).on("pagebeforeshow", "#pagetwo", function(){ // 当 进入 页 面 二 时 
alert ("AMZER"); 

3); 

$(document ).on("pageshow", "#pagetwo", function(){ // 当 进 入 页 面 二 时 
alert(" 现 在 显示 页 面 二 "); 


$(document ).on("pagebeforehide", "#pagetwo", function(){ // 当 进 入 页 面 二 时 
alert(" 页 面 二 即将 隐藏 " ) ; 

}); 

$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo 
alert(" 现 在 隐藏 页 面 二 " ) ; 

3); 


jQuery Mobile CSS # 


jQuery CSS # 


jQuery Mobile CSS 类 来 设置 不 同 元 素 的 样式 。 


以 下 列表 包含 了 通用 的 CSS 样式 : 


全 局 类 


以 下 类 可 以 在 jQuery Mobile 小 工具 中 使 用 (a, LER, Hi, RH, IRE. ): 


Class 描述 
ui-corner-all 为 元 素 添加 圆 角 
ui-shadow 为 元 素 添加 阴影 
ui-overlay-shadow 为 元 素 添 加 多 层 阴 影 
ui-mini 让 元 素 变 小 


按钮 类 


除了 全 局 类 外 ， 你 可 以 向 <a> 或 <button> 元 素 添加 以 下 类 (不 是 <input> 按钮 ): 


Class 描述 





icon 添加 在 <a> 元 素 上 并 以 按钮 形式 展示 
ui-btn-inline 在 同一 行 上 显示 按钮 

eal 定位 图 标 在 按钮 文本 之 上 

rea 定位 图 标 在 按钮 文本 的 右边 

Mom igon 定位 图 标 在 按钮 文本 之 下 

bottom 

a 定位 图 标 在 按钮 文本 的 左边 

deno namm 

PE 指定 按钮 演示 。"a" 是 默认 的 (灰色 背景 黑色 文本 样式 ), "b" 修改 颜色 为 


黑色 背景 白色 文本 


所 有 可 用 图 片 的 类 用 在 <a> 和 <button> 元 素 上 (查看 jQuery Mobile 图 标 参考 手册 了 解 如 何 
在 其 他 元 素 上 使 用 ): 


Class 标 描述 标 
ui-icon-action 动作 (一 般 用 于 页 面 跳 转 切换 ) 
ui-icon-alert 三 角形 内 的 感叹 号 
ui-icon-audio 音响 /音箱 
ui-icon-arrow-d-| A FARIS 
ui-icon-arrow-d-r A FARK 
ui-icon-arrow-u-| ALAS 
ui-icon-arrow-u-r BEARS 
ui-icon-arrow-l 左 角 箭头 
ui-icon-arrow-r 右 角 箭 头 


ui-icon-arrow-u 向 上 箭头 


ui-icon-arrow-d 
ui-icon-back 
ui-icon-bars 
ui-icon-bullets 
ui-icon-calendar 
ui-icon-camera 
ui-icon-carat-d 
ui-icon-carat-| 
ui-icon-carat-r 
ui-icon-carat-u 
ui-icon-check 
ui-icon-clock 
ui-icon-cloud 
ui-icon-comment 
ui-icon-delete 
ui-icon-edit 
ui-icon-eye 
ui-icon-forbidden 
ui-icon-forward 
ui-icon-gear 
ui-icon-grid 
ui-icon-heart 


ui-icon-home 


三 条 水 平 线 ， 一 般 用 于 展示 列表 按钮 图 标 


用 于 展示 列表 按钮 图 标 
日 万 

相机 

向 下 滑动 图 标 

向 左 滑动 图 标 


向 右 滑动 图 标 





向 上 滑动 图 标 


勾 选 


评论 / 消息 

删除 

编辑 / 铅笔 

眼睛 

禁用 标识 sign 

撤销 - (返回 上 一 步 ) 

齿轮 ， 一 般 用 于 设置 按钮 图 标 
网 格 

心 型 ， 可 用 于 文章 收藏 


主页 


ui-icon-info 
ui-icon-location 
ui-icon-lock 
ui-icon-mail 
ui-icon-minus 
ui-icon-navigation 
ui-icon-phone 
ui-icon-power 
ui-icon-plus 
ui-icon-recycle 
ui-icon-refresh 
ui-icon-search 
ui-icon-shop 
ui-icon-star 
ui-icon-tag 
ui-icon-user 


ui-icon-video 


主题 类 Classes 


电话 


开关 (On/off) 


循环 标识 


刷新 

搜索 / MAR 
商店 /购物 袋 
星 号 

标签 

用 户 / 人 物 
视频 / 相机 


jQuery Mobile 提供 了 两 个 主题 类 : a (K) 和 b ( 黑 )。 但 是 ， 你 可 以 创建 你 自己 的 自 定义 类 - 可 
定义 到 字母 "z" (查看 jQuery Mobile 主题 ) 。 下 表 列 出 了 可 用 的 主题 类 。 字母 (a-z) BAH 
式 可 以 指定 a 到 z。 例 如 ui-bar-a 或 ui-bar-b 等 。 


Class 


ui-bar-(a-z) 
ui-body-(a-z) 


ui-btn-(a-z) 


ui-group- 
theme-(a-z) 


ui-overlay-(a- 
z) 


ui-page- 
theme-(a-z) 


网 格 类 


描述 
指定 栏目 演示 - 头 部 ， 底 部 及 其 他 栏目 


- 页 面 内 容 部 分 ( 1.4.0 hkACRF), 列表 视图 ， 弹 
窗 , m, Hix, MR, HË 


指定 按钮 颜色 
定义 了 控制 组 的 演示 listviews 和 collapsible 集合 


定义 了 页 面 背 景 颜色 ， 包 括 对 话 框 ， 弹 窗 和 其 他 出 现在 最 顶层 的 页 面容 


网 格 中 的 列 是 等 宽 的 (合计 是 100%) , RAW, BR. margin 或 padding。 这 里 有 四 种 
布局 网 格 可 供 使 用 : 


网 格 类 
ui-grid-solo 
ui-grid-a 
ui-grid-b 
ui-grid-c 


ui-grid-d 


列 列 宽 对 应 实例 
1 100% ui-block-a 

2 50% / 50% ui-block-a|b 

3 33% / 33% / 33% ui-block-alb|c 

4 25% | 25% | 25% | 25% ui-block-alb|c|d 

5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|dle 


更 多 信息 可 以 查看 jQuery Mobile 网 格 章节 。 


免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 随 之 而 来 的 
风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 法 律 问题 及 风险 不 承担 
任何 责任 。 


